package work.endlove.kuikly_demo.pages

import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.compose.Button

/*
在这个例子中，含有一个居中的Text组件和右下角有一个Button组件。
在Text组件中，我们将counter变量的值设置给Text组件，
然后我们监听了Button组件的click事件，并在click事件触发的时候，
对counter变量进行累加，每次累加的时候，你会发现Text的文本会自动更新。
响应式字段observable<T>
在上述例子中，为什么Text组件的文本会自动更新呢? 答案是Text组件的text属性绑定了一个响应式字段counter。 counter字段与普通的变量不一样，它通过by observable代理，将字段变成一个响应式字段, 这样当响应式字段被设置到组件的属性后, 每次响应式字段更新时, 依赖该字段的属性都会自动更新， 从而到达UI属性响应式更新的目的。
在Kuikly中，你可以通过by observable<T>将一个字段变成响应式字段，然后绑定到UI组件的属性，这样UI组件的属性就能自动监听数据变化而自动更新, 例如:
private var counter by observable(0)
* */

@Page("hello_2")
internal class HelloTwoPage : Pager() {

    // private var counter: Int = 0
    private var counter by observable(0)

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                allCenter()
            }

            Text {
                attr {
                    text("Hello Kuikly")
                    fontSize(20f)
                    fontWeightBold()
                }
            }

            Text {
                attr {
                    text(ctx.counter.toString())
                    fontSize(20f)
                    fontWeightBold()
                }
            }

            Button {
                attr {
                    absolutePosition(bottom = 30f, right = 30f)
                    size(80f, 80f)

                    borderRadius(10f)
                    backgroundColor(Color.BLUE)

                    titleAttr {
                        text("点击更新")
                        fontSize(15f)
                        color(Color.WHITE)
                        fontWeightBold()
                    }
                }

                event {
                    click {
                        ctx.counter++
                    }
                }
            }

            Image {
                attr {
                    size(50f, 50f)
                    src("https://vfiles.gtimg.cn/wupload/xy/componenthub/TbyiIqBP.jpeg")
                }
            }
        }
    }
}